<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input v-model="query.keyword" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="pageInfo.rows" highlight-current-row v-loading="listLoading" @selection-change="checkedId" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>

      <el-table-column prop="title" label="标题" width="120" sortable>
      </el-table-column>
      <el-table-column prop="value" label="值" width="180" sortable>
      </el-table-column>
      <el-table-column prop="sequence" label="序列" width="180" sortable>
      </el-table-column>
      <el-table-column prop="parent.title" label="数据字典" width="120" sortable>
      </el-table-column>
      <el-table-column prop="intro" label="简介" min-width="180" sortable>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchDel" >批量删除</el-button>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="query.pageSize" :total="pageInfo.total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--新增或编辑界面
    :visible.sync="outerVisible" 新版本打开对话框
    v-model="dictionaryitemFormVisible" 老版本打开对话框
    -->
    <el-dialog title="新增或修改" :visible.sync="dictionaryitemFormVisible" :close-on-click-modal="false">
      <el-form :model="dictionaryitem" label-width="80px"  :rules="dictionaryitemFormRules" ref="dictionaryitemForm">
        <el-form-item label="名称" prop="title" >
          <el-col :span="8">
          <el-input v-model="dictionaryitem.title"  auto-complete="off" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="数值" prop="value" >
          <el-col :span="8">
            <el-input v-model="dictionaryitem.value"  auto-complete="off" ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="序列" prop="sequence" >
          <el-col :span="8">
            <el-input v-model="dictionaryitem.sequence"  auto-complete="off" ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="数据字典" prop="parent">
          <el-select v-model="dictionaryitem.parent"  value-key="id" placeholder="请选择">
            <el-option v-for="item in dictionarys"
             :key="item.id"
             :label="item.title"
             :value="item">
              <span style="float: left">{{ item.title}}</span>
              <!--<span style="float: right; color: #8492a6; font-size: 13px">{{ item.email}}</span>-->
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="简介">
          <el-col :span="18">
          <el-input type="textarea" v-model="dictionaryitem.intro"></el-input>
          </el-col>
        </el-form-item>
      </el-form>



      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dictionaryitemFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="save" :loading="listLoading">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
export default {
  data() {
    return {
      //分页相关
      query:{
        currentPage:1,
        pageSize:10,
        keyword:''
      },
      pageInfo:{
        total:0,
        rows:[]
      },
      listLoading: false,  //加载圈  默认关闭
      ids: [],//选中的id们  删除用

      dictionaryitemFormVisible: false,//新增界面是否显示
      dictionaryitemLoading: false,

      dictionaryitemFormRules: { //定义必填项
        title: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      },
      //新增界面数据
      dictionaryitem: {
        id:null,
        title: '',
        value: '',
        sequence: '',
        intro: '',
        parent: {}
      },
      //接收部门经理对象们
      dictionarys:[]

    }
  },
  methods: {
    //页面刷新  查找事件
    search(){
      //重置当前页为第一页
      this.query.currentPage =1;
      this.getDictionaryitems();
    },

//获取选中行数据======
    handleCurrentChange(val) {
      this.query.currentPage= val;
      this.getDictionaryitems();
    },

//获取用户列表===========
    getDictionaryitems() {
      this.listLoading = true; //发起请求之前显示加载条
      //发起请求获取数据
      this.$http.post("/dictionaryitem",this.query)
          .then(result =>{
            result = result.data; //{success,result:{}}
            if (result.success){
              this.pageInfo = result.result;
            }else{
              this.$message({
                message: '获取数据失败！'+result.message,
                type: 'error'
              });
            }
            this.listLoading = false;
          })
          .catch(result=>{
            this.$message({
              message: '系统错误！',
              type: 'error'
            });
          })
    },

//单项删除事件  index:索引   row:选中行的数据{}=====
    handleDel(index, row){
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;  //开启加载圈
        //获取到id
        let id =  row.id ;
        this.$http.delete("/dictionaryitem/"+id)
          .then(result => {
            this.listLoading = false; //进入操作成功步骤 关闭加载圈
            result= result.data
            if (result.success){
              this.search() //刷新页面
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
              //NProgress.done();
            /*this.$message({
              message: '删除成功',
              type: 'success'
            });*/
            //删除完成获取数据
            /*this.query.currentPage=1;
            this.getDictionaryitems();*/
          });
          }).catch(result => {
              this.getDictionaryitems() //重新获取数据  不用返回第一页
              this.$message({
                showClose: true,
                message: '删除失败',
                type: 'error'
              });
            console.log(result)
          });
    },

//修改回显==========
    handleEdit(index, row){
      this.dictionaryitemFormVisible = true;
      this.dictionaryitem = Object.assign({}, row); //回显
      this.getDictionaryAll();
    },

//打开新增 会话框界面====
    handleAdd() {
      this.dictionaryitemFormVisible = true; //打开会话窗口
      this.dictionaryitem =  { //清空数据
        id:null,
        title: '',
        value: '',
        sequence: '',
        intro: '',
        parent: {}
      }
      this.getDictionaryAll();
    },

//保存事件==================
    save() {
      this.$refs.dictionaryitemForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.dictionaryitemLoading = true;
            let para = Object.assign({}, this.dictionaryitem);
            //para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
            this.$http.put("/dictionaryitem",para).then((result) => {
              result = result.data;

              if (result.success){
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });

                this.dictionaryitemFormVisible = false; //关闭对话框

                this.$refs['dictionaryitemForm'].resetFields(); //重置表单

                this.getDictionaryitems(); //重新加载数据
        }else{
            this.$message({
              message: '保存失败,'+result.message,
              type: 'error'
            });
        }

              this.dictionaryitemLoading = false; //关闭加载条
            });
          });
        }
      });
    },

//查询所有员工 选择部门经理=====
    getDictionaryAll(){
      this.$http.get("/dictionary")
      .then(result=>{
        result = result.data;
        this.dictionarys = result.result;
      })
      .catch(result=>{
        this.$message({
          message: '数据获取失败！,'+result.message,
          type: 'error'
        });
      })
    },


/*=============批量删除========================*/
    //解析选中的id们  批量删除用
    checkedId(val) {
      //获取到选中的数据们的id
      let ids =  val.map(val=>val.id)
      //console.log(ids,'111')
      //赋值 获取到的 id们 到data中
      this.ids = ids;
    },
    //批量删除
    batchDel() {
      let ids = this.ids;
      //判断 未选择 提示用户进行选择
      if (ids.length<1){
        this.$message({
          showClose: true,
          message: '请选择删除的内容!',
          type: 'error'
        });
        return;
      }
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.patch("/dictionaryitem",ids)
            .then(result => {
              this.listLoading = false;

              //删除成功 刷新页面  回到第一页 不然最后一页没有数据了  会显示空白页面
              this.search();

              this.$message({
                message: '删除成功',
                type: 'success'
              });

        });
      }).catch(result=> {
        //删除失败刷新页面
        this.getDictionaryitems()
        this.$message({
          showClose: true,
          message: '删除失败',
          type: 'error'
        });
        console.log(result)
      });
    }
  },
/*=============批量删除========================*/

  mounted() {
    this.getDictionaryitems();
  }
}

</script>

<style scoped>

</style>